@charset "utf-8";
@import "reset";
@import "iconfont";
$font-size: 64px;
html {
    font-size: $font-size;
}
@function r($px) {
    @return $px/$font-size*1rem;
}
.web {
    width: 100%;
    height: 100%;
    overflow: hidden;
    .H_top {
        background: #333;
        padding: r(10px) r(20px);
        input {
            width: r(500px);
            height: r(53px);
            vertical-align: middle;
            background-color: #1f1f1f;
            padding-left: r(60px);
            border: 1px solid #fff;
            border-radius: 12px;
        }
        i {
            font-size: r(27px);
            color: #fff;
            position: absolute;
            top: r(38px);
            left: r(40px);
        }
        a {
            font-size: r(27px);
            color: #fff;
        }
    }
    .H_content {
        background: #f1f1f1;
        width: 100%;
        height: 100%;
        overflow: hidden;
        .H_cont {
            padding-left: r(20px);
            padding-top: r(20px);
            h6 {
                font-size: r(27px);
            }
            p {
                display: inline-block;
                height: r(56px);
                font-size: r(30px);
                line-height: r(56px);
                text-align: center;
                color: #ababab;
                background: #fff;
                border: 1px solid #e4e4e4;
            }
            p:nth-of-type(1) {
                width: r(153px);
            }
            p:nth-of-type(2) {
                width: r(180px);
            }
            p:nth-of-type(3) {
                width: r(200px);
            }
            p:nth-of-type(4) {
                width: r(120px);
            }
            p:nth-of-type(5) {
                width: r(153px);
            }
            p:nth-of-type(6) {
                width: r(287px);
            }
            p:nth-of-type(7) {
                width: r(93px);
            }
            p:nth-of-type(8) {
                width: r(250px);
            }
        }
    }
}